<template>
        <el-card shadow="never" style="max-height: 70vh; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-form-item label="所属租户:" prop="tenant_id">
                    <SelectPage v-model="form.tenant_id" :url="'/admin/px.tenant/selectPage'" show_field="name"
                                placeholder="请选择租户"
                                show_id='id' query_field="id" :multiple="false" />
                </el-form-item>
                <el-form-item label="所属用户:" prop="user_id">
                    <SelectPage v-model="form.user_id" :url="'/admin/user/selectPage'"
                                show_field="nickname" show_id='uid'  query_field="uid" :multiple="false" />
                </el-form-item>
                <el-form-item label="用户名:" prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名" clearable />
                </el-form-item>
                <el-form-item label="联系手机号:" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入联系手机号" clearable />
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input v-model="form.password" placeholder="请输入密码" clearable />
                </el-form-item>
                <el-form-item label="头像:" prop="head_image">
                    <ImageUpload v-model="form.head_image" />
                </el-form-item>
                <el-form-item label="电子邮箱:" prop="email">
                    <el-input v-model="form.email" placeholder="请输入电子邮箱" clearable />
                </el-form-item>
                <el-form-item label="状态 :" prop="status">
                    <el-select v-model="form.status" placeholder="请选择状态 " clearable>
                        <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="昵称:" prop="nickname">
                    <el-input v-model="form.nickname" placeholder="请输入昵称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                tenant_id: [{ required: true, message: "请输入租户ID", trigger: "blur" }],
                user_id: [{ required: true, message: "请输入user_id", trigger: "blur" }],
                type: [{ required: true, message: "请输入1培训团队账号", trigger: "blur" }],
                username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
                email: [{ required: true, message: "请输入电子邮箱", trigger: "blur" }],
                status: [{ required: true, message: "请输入状态 ", trigger: "blur" }],
            },
            form: {  },
            // 区域选择配置
            areaOptions: regionData,
            status:[
                {value: 1, label: '启用'},
                {value: 2, label: '禁用'},
            ],
        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                         nval.password='';
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    console.log(this.form)
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        }
    }
}
</script>
